<template>
  <div>
		<BreadCrumb></BreadCrumb>
		<el-descriptions title="个人信息" border>
			<el-descriptions-item width="180px" class-name="image" label="头像" :rowspan="4">
				<el-upload
					style="width: 150px; height: 150px; margin-left: 15px; overflow: hidden;"
					action="#"
					:auto-upload="false"
					:limit="1"
					v-model:file-list="fileList"
					list-type="picture-card"
					:on-change="changeIcon">
				</el-upload>
				
			</el-descriptions-item>
			<el-descriptions-item label="姓名">{{userInfo.name}}</el-descriptions-item>
			<el-descriptions-item label="手机号">{{userInfo.phone}}</el-descriptions-item>
			<el-descriptions-item label="电子信箱">{{userInfo.email}}</el-descriptions-item>
			<el-descriptions-item label="生日">{{userInfo.birthday}}</el-descriptions-item>
			<el-descriptions-item label="毕业院校">{{userInfo.school}}</el-descriptions-item>
			<el-descriptions-item label="专业">{{userInfo.major}}</el-descriptions-item>
			<el-descriptions-item label="学历">{{userInfo.qualification}}</el-descriptions-item>
			<el-descriptions-item label="状态">
				<span v-if="userInfo.active">启用</span>
				<span v-else>禁用</span>
			</el-descriptions-item>
		</el-descriptions>
	</div>
</template>

<script setup>
import BreadCrumb from '@@/menu/breadcrumb'
import { ElMessageBox } from 'element-plus'
import { get, post } from '@/axios'
import { ref, reactive } from 'vue'
const src = ref('/static/image/3ea6beec64369c2642b92c6726f1epng.png')
const userInfo = ref({})
const fileList = reactive([]) 
getUserInfo()
function getUserInfo () {
	get('/umsStudent/getUserInfo', {}, content => {
		userInfo.value = content
		
		if (content.icon) {
			src.value = 'http://192.168.80.191:9000/' + content.icon
		}
		fileList.push({
			url: src.value
		})
	})
}
function changeIcon (file) {
	ElMessageBox.confirm('确定要保存该图片为用户头像吗?', '上传头像', {
		type: 'warning',
		cancelButtonText: '取消',
		confirmButtonText: '确定'
	}).then(() => {
		post('/umsStudent/upload/icon', { file: file.raw }, content => {
			console.dir(content)
		})
	}).catch(() => {})
}
</script>

<style scoped lang="scss">
.el-descriptions {
	margin-top: 50px;
	::v-deep .image {
		padding: 0 !important;
	}
}
</style>